<template>
  <div>
    <div>
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        lazy-render
      >
        <van-swipe-item v-for="(v, i) in swiper" :key="i">
          <img :src="v" class="img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="gutter">
      <van-grid :gutter="2" :column-num="5" :border="false">
        <van-grid-item
          v-for="(v, i) in pagevalue"
          :key="i"
          :icon="v.icon"
          :text="v.title"
        />
      </van-grid>
    </div>
    <div class="cell">
      <div class="cell-item">
        <p>一月起租</p>
        <span>灵活选择</span>
      </div>
      <div class="cell-item">
        <p>押一付一</p>
        <span>为你减负</span>
      </div>
      <div class="cell-item">
        <p>地铁租房</p>
        <span>快人一步</span>
      </div>
    </div>
    <div class="housing">
      <h1>全部房源</h1>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
    </div>
    <div class="dlDiv">
      <dl>
        <dt><img src="" alt="" /></dt>
        <dd>
          <h3>adasasd</h3>
          <p>bhadbasbjdkkjad</p>
          <span>dsjkjasdnjk</span>
        </dd>
      </dl>
      <dl>
        <dt><img src="" alt="" /></dt>
        <dd>
          <h3>adasasd</h3>
          <p>bhadbasbjdkkjad</p>
          <span>dsjkjasdnjk</span>
        </dd>
      </dl>
      <dl>
        <dt><img src="" alt="" /></dt>
        <dd>
          <h3>adasasd</h3>
          <p>bhadbasbjdkkjad</p>
          <span>dsjkjasdnjk</span>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import Home from "../../SVG/首页.png";
import Second from "../../SVG/二手房.png";
import Renting from "../../SVG/租房.png";
import Sellers from "../../SVG/卖房.png";
import Broker from "../../SVG/经纪人.png";
import Mapplat from "../../SVG/地图.png";
import Assess from "../../SVG/估价.png";
import VRhouse from "../../SVG/Vr看房.png";
import Tool from "../../SVG/工具.png";
import Finish from "../../SVG/装修.png";
const pagevalue = [
  {
    title: "新房",
    icon: Home,
  },
  {
    title: "二手房",
    icon: Second,
  },
  {
    title: "租房",
    icon: Renting,
  },
  {
    title: "卖房",
    icon: Sellers,
  },
  {
    title: "经纪人",
    icon: Broker,
  },
  {
    title: "地图",
    icon: Mapplat,
  },
  {
    title: "股价",
    icon: Assess,
  },
  {
    title: "VR看房",
    icon: VRhouse,
  },
  {
    title: "工具",
    icon: Tool,
  },
  {
    title: "装修",
    icon: Finish,
  },
];
//轮播图
const swiper: any = [
  "https://img2.baidu.com/it/u=2147843660,3054818539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313",
  "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
  "https://img0.baidu.com/it/u=4281860672,1981139753&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=320",
  "https://img0.baidu.com/it/u=985192759,2265250910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
  "https://img1.baidu.com/it/u=3316754777,2519856621&fm=253&fmt=auto&app=138&f=JPEG?w=653&h=500",
];
const value1 = ref(0);
const value2 = ref("a");
const value3 = ref(0);
const value4 = ref("a");
const option1 = [
  { text: "区域", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];
const option2 = [
  { text: "价格", value: "a" },
  { text: "好评排序", value: "b" },
  { text: "销量排序", value: "c" },
];
const option3 = [
  { text: "区域", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];
const option4 = [
  { text: "更多", value: "a" },
  { text: "好评排序", value: "b" },
  { text: "销量排序", value: "c" },
];
</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.dlDiv {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  dl {
    border: 1px solid #ccc;
    width: 47%;
    height: auto;
    border-radius: 10px;
    margin: 5px 0;
  }
}
.gutter {
  width: 100%;
  margin: 10px 0;
}
.cell {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cell-item {
  width: 33%;
  height: 100px;
  background: orange;
  border-radius: 5%;
  padding: 10px;
  text-align: center;
}
.cell-item > p {
  color: #fff;
  font-size: 15px;
}
.cell-item > span {
  color: #888;
  margin-right: 10px;
}
.img {
  width: 100%;
  height: 150px;
}

.housing {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
  h1 {
    width: 100%;
    margin: 10px 0;
  }
}
.van-dropdown-menu {
  width: 100%;
}
</style>
